<template>
  <div v-if="visible" class="upload-overlay">
    <div class="panel" :style="{ '--overall': overallProgress }">
      <div class="content">
        <!-- 批次信息 -->
        <div class="batch">
          <div class="brand">
            <img class="brand-logo" :src="batchLogo" :alt="batchName" />
          </div>
          <div class="meta">
            <h3 class="batch-name">{{ batchName }}</h3>
            <!-- 醒目的提示 -->
            <div class="alert" role="alert">
              <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"
                />
              </svg>
              <div>
                请勿关闭或刷新页面，否则上传将中断且无法恢复。
                <div class="sub">请保持网络稳定，等待上传完成后再继续其它操作。</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 文件列表 -->
        <div class="files">
          <!-- 商品信息 -->
          <div
            class="file-item"
            :style="{
              '--p': uploadProgress?.productProgress || 0,
              '--fill': '#dbeafe',
            }"
            role="progressbar"
            :aria-valuenow="uploadProgress?.productProgress || 0"
            aria-label="商品信息上传进度"
          >
            <div class="file-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                <path
                  d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
                />
              </svg>
            </div>
            <div class="file-main">
              <div class="file-top">
                <span class="file-name" :title="uploadProgress?.productFileName || '商品信息'">
                  {{ uploadProgress?.productFileName || '商品信息' }}
                </span>
                <span class="file-size">{{
                  formatFileSize(uploadProgress?.productFileSize || 0)
                }}</span>
              </div>
            </div>
            <span class="file-percent"
              >{{ formatPercentage(uploadProgress?.productProgress || 0) }}%</span
            >
          </div>

          <!-- 图片包 -->
          <div
            class="file-item"
            :style="{
              '--p': uploadProgress?.imageProgress || 0,
              '--fill': '#e0f2fe',
            }"
            role="progressbar"
            :aria-valuenow="uploadProgress?.imageProgress || 0"
            aria-label="图片包上传进度"
          >
            <div class="file-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                <path
                  d="M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z"
                />
              </svg>
            </div>
            <div class="file-main">
              <div class="file-top">
                <span class="file-name" :title="uploadProgress?.imageFileName || '图片包'">
                  {{ uploadProgress?.imageFileName || '图片包' }}
                </span>
                <span class="file-size">{{
                  formatFileSize(uploadProgress?.imageFileSize || 0)
                }}</span>
              </div>
            </div>
            <span class="file-percent"
              >{{ formatPercentage(uploadProgress?.imageProgress || 0) }}%</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'UploadOverlay',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    batchName: {
      type: String,
      required: true,
    },
    batchLogo: {
      type: String,
      required: true,
    },
    uploadProgress: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    // 计算总体上传进度
    const overallProgress = computed(() => {
      const imageSize = props.uploadProgress?.imageFileSize || 0
      const productSize = props.uploadProgress?.productFileSize || 0
      const totalSize = imageSize + productSize

      if (totalSize === 0) return 0

      const imageProgress = props.uploadProgress?.imageProgress || 0
      const productProgress = props.uploadProgress?.productProgress || 0
      const uploadedSize = (imageSize * imageProgress) / 100 + (productSize * productProgress) / 100

      return Math.round((uploadedSize / totalSize) * 100)
    })

    // 格式化文件大小
    const formatFileSize = bytes => {
      if (bytes === 0) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }

    // 格式化百分比，固定2位小数
    const formatPercentage = value => {
      return (value || 0).toFixed(2)
    }

    return {
      overallProgress,
      formatFileSize,
      formatPercentage,
    }
  },
}
</script>

<style scoped>
:root {
  --overlay-bg: rgba(255, 255, 255, 0.72);
  --panel-bg: #ffffff;
  --panel-gradient: linear-gradient(180deg, rgba(30, 64, 175, 0.05), rgba(30, 64, 175, 0.02));
  --border-soft: rgba(30, 64, 175, 0.15);
  --text: #0f172a;
  --muted: #475569;
  --brand-tile: #f1f5f9;
  /* 阶段填充色（浅） */
  --c-importing: #e0f2fe; /* 天蓝 */
  --c-matching: #dbeafe; /* 淡蓝 */
  --c-vector: #dcfce7; /* 淡绿（完成） */
  /* 警示色 */
  --warn-bg: #fff7ed; /* amber-50 */
  --warn-bd: #fdba74; /* amber-300 */
  --warn-tx: #7c2d12; /* amber-900 */
}

/* ===== Overlay & Panel ===== */
.upload-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.panel {
  position: relative;
  width: min(680px, 94vw);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--panel-bg);
  background-image: var(--panel-gradient);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1), inset 0 0 0 1px var(--border-soft);
  /* 用 CSS 变量控制总体进度（0-100） */
  --overall: 0;
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 左侧竖条：轨道 + 按总体进度自下而上填充 + 竖向流光 */
/* 轨道（浅灰蓝） */
.panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  background: #e2e8f0;
}

/* 填充层（高度=总体进度），并在其中做自下而上的流光 */
.panel::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6px;
  height: calc(var(--overall) * 1%);
  border-bottom-left-radius: 14px;
  border-top-left-radius: calc(var(--overall) * 0.14px); /* 进度到顶时自然圆角 */
  background-image: linear-gradient(180deg, #3b82f6 0%, #60a5fa 70%, #3b82f6 100%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.55) 0 12px,
      rgba(255, 255, 255, 0) 12px 24px
    );
  background-blend-mode: overlay, normal;
  background-size: 100% 100%, 100% 24px;
  animation: shimmerUp 2.4s linear infinite;
  filter: saturate(1.05);
}

@keyframes shimmerUp {
  0% {
    background-position: 0 100%, 0 100%;
  }
  100% {
    background-position: 0 100%, 0 0%;
  }
}

/* ===== 紧凑布局（高度优化，适配缩放） ===== */
.content {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 批次信息区（更紧凑） */
.batch {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.brand {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-tile);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  flex-shrink: 0;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: center;
  min-height: 80px;
}

.batch-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* 醒目提示（紧凑） */
.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff7ed; /* amber-50 */
  border: 1px solid #fdba74; /* amber-300 */
  color: #7c2d12; /* amber-900 */
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

/* 警告框左侧彩色条 */
.alert::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.alert svg {
  flex: 0 0 16px;
  margin-top: 1px;
}

.alert .sub {
  font-weight: 500;
  color: #9a3412;
}

/* 文件列表：每项=大进度条；整体更矮更紧凑 */
.files {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-item {
  --p: 0; /* 进度百分比 */
  --fill: #e0f2fe; /* 默认填充色 */
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.15);
  overflow: hidden;
  min-height: 48px;
}

/* 文件项背景作为进度条 - 使用渐变填充 */
.file-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    var(--fill) 0%,
    var(--fill) calc(var(--p) * 1%),
    transparent calc(var(--p) * 1%)
  );
  pointer-events: none;
}

/* 流光效果 */
.file-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  width: calc(var(--p) * 1%);
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.45) 0 10px,
    rgba(255, 255, 255, 0.15) 10px 20px
  );
  opacity: 0.45;
  pointer-events: none;
}

.file-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: #1e3a8a;
  z-index: 1;
}

.file-main {
  min-width: 0;
  z-index: 1;
}

.file-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.file-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #475569;
}

.file-percent {
  font-size: 12px;
  font-weight: 800;
  color: #0b3a2a;
  z-index: 1;
  min-width: 40px;
  text-align: right;
}

/* 小屏优化 */
@media (max-width: 480px) {
  .panel {
    width: min(94vw, 560px);
    padding: 12px 14px;
  }
  .brand {
    width: 70px;
    height: 70px;
  }
  .meta {
    min-height: 70px;
  }
  .batch-name {
    font-size: 14px;
  }
  .file-item {
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    padding: 9px;
    border-radius: 10px;
  }
  .file-percent {
    min-width: 40px;
  }
}
</style>
